var root = document.getElementsByClassName('root')[0],
		btn  = document.getElementsByTagName('button'),
		btn1 = btn[0],
		btn2 = btn[1],
		btn3 = btn[2],
		btn4 = btn[3],
		addNode = btn[4],
		delNode = btn[5],
		input = document.getElementById('input'),
		tip = document.getElementById('tip');
function on(o,ev,fn, self){
    if(o.addEventListener){//ff，webkit
        o.addEventListener(ev,function(e){
        	fn.call(self,e);
        },false);
    }else if(o.attachEvent){//ie 8-
        o.attachEvent('on'+ev,function(e){//默认指向window
            fn.call(self,e); //改变this指向
        });
    }
}

(function(window){


function ManyTree(){
	this.root = null;
}

ManyTree.prototype = {
	constructor: ManyTree,
	wrap: root,
	delay: 0,
	step: 500,
	index: 0,
	value: '',
	flag: false,
	active: null,
	add: function(value, parent){

		var node = {
			value: value,
			childs:[],
			parent:null,
			layer:1
		};

		if(parent === undefined){
			parent = this.root;
			this.index = 1;
		}
		if(this.root === null){
			this.root = node;
		}else{
			if(parent.childs.length == 0){
				parent.childs.push(node);
				node.parent = parent;
				node.layer = node.parent.layer + 1;
			}else{
				for(var i = 0; i < parent.childs.length; i++){
					if(value.substring(0, parent.childs[i].layer -1) == parent.childs[i].value.substring(0,parent.childs[i].layer -1)){
						break;
					}
				}
				if(i == parent.childs.length){
					parent.childs.push(node);
					node.parent = parent;
					node.layer = node.parent.layer + 1;
				}else{
					this.add(value, parent.childs[i]);
				}
			}
		}
	},
	render: function(parent, wrap){
		if(wrap === undefined){
			wrap = this.wrap;
		}
		if(parent){
			if(parent == this.root){
				wrap.innerHTML = parent.value;
				div = wrap
			}else{
				var div = document.createElement('div');
				var text = document.createTextNode(parent.value);
				div.appendChild(text);
				wrap.appendChild(div);
			}
			if(parent.childs.length){
				for(var i in parent.childs){
					this.render(parent.childs[i], div);
				}
			}
		}
	},
	update: function(){
		if(root){
			var node = {
				value: root.innerText.split('\n')[0],
				childs: root.children,
				parent: null,
				layer: 1
			};
			var stack = [];
			for(var i = 0; i < root.children.length; i++){
				stack.push(root.children[i]);
				node.childs[i].parent = node;
			}
			var item;
			while(stack.length){
				item = stack.shift();
				item.value = item.innerText.split('\n')[0];
				item.childs = item.children;
				item.layer = item.parent.layer + 1;
				if(item.children.length){
					for(var i = 0; i < item.children.length; i++){
						stack.push(item.children[i]);
						item.children[i].parent = item;
					}
				}
				this.root = node;
			}
		}else{
			this.root = null;
		}
	},
	rootClick: function(e){
		var e = e || window.event;
		if(e.target.nodeName.toLowerCase() === 'div'){
			var bg = e.target.style.backgroundColor;
			e.target.style.backgroundColor = bg == 'green' ? '#fff' : 'green';
			if(e.target.style.backgroundColor == 'green'){
				this.active = e.target;
			}else{
				this.active = null;
			}
		}
	},
	deleteChild: function(e){
		if(this.active){
			this.active.parentNode.removeChild(this.active);
			this.update();
		}
	},
	addChild: function(e){
		var value = input.value.trim();
		if(value && this.active){
			var div = document.createElement('div');
			var text = document.createTextNode(value);
			div.appendChild(text);
			this.active.appendChild(div);
			this.update();
		}
	},
	init: function(){
		var arr = ['cat','load','loadd','log','cbb','cdd','caa','smile','subtrol','cbb','add','locb','cdfe','asdwe','sdwe','dwewe','jihh'];
		for(var i in arr){
			this.add(arr[i]);
		}
		this.render(this.root);
		on(btn1, 'click', this.btn1Click, this);
		on(btn2, 'click', this.btn2Click, this);
		on(btn3, 'click', this.btn3Click, this);
		on(btn4, 'click', this.btn4Click, this);
		on(root, 'click', this.rootClick, this);
		on(delNode, 'click', this.deleteChild, this);
		on(addNode, 'click', this.addChild, this);
	},
	delayRun: function(wrap){
		
		setTimeout(function(){
			wrap.style.backgroundColor = 'green';
		},this.delay*this.step);
		if(wrap.innerText.split('\n')[0] === this.value){
			this.flag = true;
			setTimeout(function(){
				wrap.style.backgroundColor = 'green';
				tip.innerHTML = '找到了';
			},this.delay*this.step+this.step);
		}else{
			setTimeout(function(){
				wrap.style.backgroundColor = '#fff';
			},this.delay*this.step+this.step);
		}
		
		this.delay++;
	},
	_init: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
			tip.innerHTML = '';
			this.flag = false;
			var temp = [];
			var stack = [];
			for(var i = 0; i < wrap.children.length; i++){
				stack.push(wrap.children[i]);
			}
			var item;
			while(stack.length){
				item = stack.shift();
				item.style.backgroundColor = '#fff';
				if(item.children.length){
					for(var i = 0; i < item.children.length; i++){
						stack.push(item.children[i]);
					}
				}
			}
		}
		var e = e || window.event;
		if(e.target == btn2 || e.target == btn1){
			this.value = '';
		}
		return {
			e: e,
			root: root,
			wrap: wrap
		};
	},
	btn1Click: function(e, root, wrap){
		var a = this._init(e, root, wrap);
		e = a.e;
		root = a.root;
		wrap = a.wrap;
		if(root !== null){
			this.delayRun(wrap);
			if(this.flag)return true;
			if(root.childs.length){

				for(var i = 0; i < root.childs.length; i++){
					if(this.btn1Click(e, root.childs[i],wrap.children[i])){
						break;
					}
				}
			}
		}
	},
	btn2Click: function(e, root, wrap){
		
		var a = this._init(e, root, wrap);
		e = a.e;
		root = a.root;
		wrap = a.wrap;
		this.delayRun(wrap);
		var stack = [];
		for(var i = 0; i < wrap.children.length; i++){
			stack.push(wrap.children[i]);
		}
		var item;
		while(stack.length){
			item = stack.shift();
			this.delayRun(item);
			if(this.flag)  break;
			if(item.children.length){
				for(var i = 0; i < item.children.length; i++){
					stack.push(item.children[i]);
				}
			}
		}
		
	},
	btn3Click: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
		}
		this.value = input.value.trim();
		if(this.value){
			this.value = this.value.toLowerCase();
			this.btn1Click(e);
		}
		
	},
	btn4Click: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
		}
		this.value = input.value.trim();
		if(this.value){
			this.value = this.value.toLowerCase();
			this.btn2Click(e);
		}
	},
};

window.manyTree = ManyTree;
})(window);


var manyTree = new window.manyTree();
manyTree.init();
